<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title>鲜知校园-学校</title>
    <link rel="stylesheet" href="/static/front/common/css/reset.css" />
    <link rel="stylesheet" href="/static/front/css/schoolList.css" />
    <link rel="stylesheet" href="/static/front/css/common.css" />
    <script src="/static/front/common/js/jquery-1.12.4.min.js"></script>
    <style>
        .loading {
            display: none;
            position: relative;
            bottom: 4vh;
            width: 100%;
            text-align: center;
            color: #707070;
        }
        .first-loading {
            position: relative;
            top: 30vh;
            width: 100%;
            text-align: center;
            font-size: 4vw;
            color: #707070;
        }
        .content_text {
            width: 50vw !important;
        }
    </style>
</head>

<body>
    <div class="container">
        <!-- 头部搜索 -->
        <form id="data-form">
            {{.xsrfdata}}
            <input type="hidden" id="cur-page" name="p" value="1">
            <div class="searchHeader">
                <div class="select_div">
                    <select name="city_id" id="city">
                        <option value="">选择城市</option>
                        {{range .cityList}}
                            <option value="{{.Id}}" {{if eq $.cityId .Id}}selected{{end}}>{{.Name}}</option>
                        {{end}}
                    </select>
                    <img class="selectIcon" src="/static/front/img/selectIcon.png" alt="">
                </div>
                <div class="search_div">
                    <input type="text" name="name" id="name" value="{{.name}}">
                    <img class="searchIcon" src="/static/front/img/searchIcon.png" alt="">
                </div>
            </div>
        </form>
        <!-- 内容列表 -->
        <div class="content">
            <ul id="data-list">

            </ul>
        </div>
        <div id="loading" class="loading">玩命加载中...</div>
    </div>
    {{template "common/bottom-nav.html" .}}
</body>

<script type="text/javascript">

    var canSubmit = true,
        canLoad = true,
        p = 1;

    function firstLoading(t) {
        $('#loading').removeClass('loading').addClass('first-loading').text(t).show();
    }

    function loading(t) {
        $('#loading').removeClass('first-loading').addClass('loading').text(t).show();
    }

    function loadMore() {

        if (!canSubmit) return false;
        canSubmit = false;
        var curPage = p++;
        $('#cur-page').val(curPage);
        if (curPage == 1) {
            firstLoading('玩命加载中...');
        } else {
            loading('玩命加载中...');
        }

        setTimeout(function () {
            $.ajax({
                url: '{{urlfor "controllers.SchoolController.LoadMore"}}',
                type: 'POST',
                data: $('#data-form').serialize(),
                success: function (res) {

                    canSubmit = true;
                    if ($.trim(res) == "") {
                        canLoad = false;
                        if (curPage == 1) {
                            firstLoading('空空如也');
                        } else {
                            loading('扯不动了，到底了');
                        }
                    } else {
                        $('#loading').hide();
                        $('#data-list').append(res);
                    }

                }
            });
        }, 1000);
    }

    $(function () {

        loadMore();

        $(window).scroll(function () {
            //已经滚动到上面的页面高度
            var scrollTop = $(this).scrollTop();
            //页面高度
            var scrollHeight = $(document).height();
            //浏览器窗口高度
            var windowHeight = $(this).height();
            //此处是滚动条到底部时候触发的事件，在这里写要加载的数据，或者是拉动滚动条的操作
            if (scrollTop + windowHeight == scrollHeight) {
                if (!canLoad) {
                    return false;
                }
                loadMore();
            }
        });

        $('#city').change(function () {
            $('#data-form').submit();
        });

    });

</script>

</html>